import React, {useState} from 'react'
import {useNavigate} from 'react-router-dom'
import {Button} from '@/components/ui/button'
import {Input} from '@/components/ui/input'
import {useSignIn} from '@/store/userStore.ts'
import {Layout} from '@/components/Layout'
import {Eye, EyeOff} from 'lucide-react'
import reactLogo from '@/assets/logo.svg'
import {ROUTE_PATHS} from "@/routs/routes.ts";

export const LoginPage = () => {
    const [phone, setPhone] = useState('')
    const [passwd, setPassword] = useState('')
    const [showPassword, setShowPassword] = useState(false)
    const [isLoading, setLoading] = useState(false)

    const signIn = useSignIn();

    const navigate = useNavigate()


    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); // 阻止默认表单提交行为
        setLoading(true)
        try {
            await signIn({phone, passwd}); // 直接使用组件状态中的值
            navigate(ROUTE_PATHS.TICKET, {replace: true})
        } finally {
            setLoading(false);
        }
    }

    return (
        <Layout showBottomNav={false}>
            <div className="flex flex-col items-center  mt-10 min-h-[calc(100vh-120px)] px-6">
                <div className="w-full max-w-sm space-y-6">
                    {/* Logo区域 */}
                    <div className="text-center ">
                        <img src={reactLogo} alt="React Logo" className="w-full  mx-auto mb-4"/>
                    </div>

                    {/* 登录表单 */}
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div>
                            <Input
                                id="phone"
                                type="tel"
                                pattern="[0-9]{0,11}"
                                placeholder="请输入手机号"
                                value={phone}
                                onChange={(e) => {
                                    const val = e.target.value;
                                    if (/^\d{0,11}$/.test(val)) { // 只允许数字且最多11位
                                        setPhone(val);
                                    }
                                }}
                                required
                                className="h-12"
                            />
                        </div>

                        <div>
                            <div className="relative">
                                <Input
                                    id="password"
                                    type={showPassword ? 'text' : 'password'}
                                    placeholder="请输入密码"
                                    value={passwd}
                                    onChange={(e) => setPassword(e.target.value)}
                                    required
                                    className="h-12 pr-10"
                                />
                                <button
                                    type="button"
                                    onClick={() => setShowPassword(!showPassword)}
                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                                >
                                    {showPassword ? <EyeOff size={20}/> : <Eye size={20}/>}
                                </button>
                            </div>
                        </div>

                        <Button
                            type="submit"
                            className="w-full h-12  "
                            disabled={isLoading}
                        >
                            {isLoading ? '登录中...' : '登录'}
                        </Button>
                    </form>

                    {/* 提示信息 */}
                    <div className="text-center text-xs text-gray-400">
                        <p>测试账号：15017917885</p>
                        <p>测试密码：123456</p>
                    </div>
                </div>
            </div>
        </Layout>
    )
}

